<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress-bar {  
    height: 20px;  
    background-color: #ddd;  
    width: 0%;
    transition: width 0.5s ease;
  }  
    </style>
</head>
<body>
    <div id="app">
        <div class="progress-bar" :style="{ width: progress + '%' }"></div>  
        <button @click="increaseProgress">增加进度</button>  

       </div>
    </div>    
</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref, reactive,computed,watch}=Vue;
    createApp({
       
    setup() {  
      const progress = ref(0);
    
      
      function increaseProgress() {  
        if (progress.value < 100) {  
          progress.value += 10;   
        }  
      }  
      watch(progress, (newValue, oldValue) => {  
        console.log(`进度从${oldValue}%变化到${newValue}%`);  
      
      });  
    
      return {  
        progress,  
        increaseProgress  
      };  
    }  
  
    }).mount("#app")
</script>
</html>